﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <style type="text/css">
        .style1 {
            width: 50%;
        }
    </style>
    <script language="javascript" type="text/javascript">
        $(function () {
            //隔行显示奇数行背景颜色（#eeeeee），偶数行颜色（#999999）
            $("#tb>tbody>tr:odd").css("background-color", "#abf3e4");
            $("#tb>tbody>tr:even").css("background-color", "#46e7bf");

            //光棒效果(移入颜色为#c07df7  移出颜色为原本颜色)
            $("#tb>tbody>tr").mouseover(function () {
                //1、获取原本tr行的颜色值
                var color = $(this).css("background-color");
                //2、设置自定义属性bg，并把原来的颜色赋值给它
                $(this).attr("bg", color);
                //3、将最新的颜色 赋值给当前tr行
                $(this).css("background-color", "#c07df7");
            });
            $("#tb>tbody>tr").mouseout(function () {
                //1、取出存在bg属性的颜色
                var color = $(this).attr("bg");
                //2、给当前tr赋值bg里面存的颜色
                $(this).css("background-color", color);
            });

            //全选
            $("#chkAll").click(function () {
                var result = $(this).attr("checked");
                $("input[name='chkItem']").attr("checked", result);
            });
            //返选
            $("#chkRev").click(function () {
                $("input[name='chkItem']").each(function () {
                    $(this).attr(
                        "checked", !$(this).attr("checked")
                        );
                });
            });
        })
    </script>
</head>
<body>
    <div>

        <table id="tb" class="style1">
            <tbody>
                <tr>
                    <td>
                        ADC
                    </td>
                    <td>
                        金克斯
                    </td>
                </tr>
                <tr>

                    <td>
                        辅助
                    </td>
                    <td>
                        布隆
                    </td>
                </tr>
                <tr>

                    <td>
                        法师
                    </td>
                    <td>
                        安妮
                    </td>
                </tr>
                <tr>

                    <td>
                        上单
                    </td>
                    <td>
                        螃蟹
                    </td>
                </tr>
                <tr>

                    <td>
                        打野
                    </td>
                    <td>
                        盲僧
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
